<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>订票</title>
    <script src="/js/vue.js"></script>
    <!-- element-ui引入样式 展示数据的-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios库  从后端获取数据-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="../css/index.css"/>
<link rel="stylesheet" type="text/css" href="css/yuding.css"/>

<body>
<div>
    <iframe scrolling="no" frameborder="0" src="../head/head.html" width="100%" height="27"></iframe>
</div>
<div class="top">
    <iframe scrolling="no" src="../top/top.html" frameborder="0" width="100%" height="110"></iframe>
</div>
<div class="menu">
    <iframe scrolling="no" src="../daohang/meizu.html" frameborder="0" width="100%" height="50"></iframe>
</div>

<div id="app">
    <div class="container">
        <div class="bgcolor_white">
            <div class="cur_position">您的位置：<a href="">首页</a> &gt;&nbsp;&nbsp;门票预订</div>
            <div class="yd_1200">
                <div class="detail_media_right">
                    <h2 class="detail_media_title">{{scenics[0].name}}<span>{{scenics[0].jbcode}}</span></h2>
                    <ul class="detail_media_content">
                        <li class="w"><em>景点地址:</em><span>{{scenics[0].saddress}}<a data-targetid="jtzn" href="#"
                                                                                    class="map_icon goToAnchor"><i></i>查看地图</a></span>
                        </li>
                        <li><em>营业时间:</em><span>{{scenics[0].yytime}}<br>
            </span></li>
                        <li><em>乐乐价：</em><span><i class="price_ll">{{scenics[0].dprice}}</i>门市价：<i
                                class="price_th">{{scenics[0].oprice}}</i></span></li>
                        <li>
                            <button @click="getUser()" class="yd_btn">加入收藏</button>
                        </li>
                    </ul>
                </div>
                <div>
                    <div id="ifocus">
                        <div id="ifocus_pic">
                            <div id="ifocus_piclist" style="left:0; top:0;">
                                <ul v-for=" pic in pics">
                                    <li><a href="" target="_blank"><img :src="pic.spic" alt=""/></a></li>
                                </ul>
                            </div>
                            <div id="ifocus_opdiv"></div>
                            <div id="ifocus_tx">
                                <ul v-for=" pic in pics">
                                    <li class="current">{{pic.summary}}</li>
                                </ul>
                            </div>
                        </div>
                        <div id="ifocus_btn">
                            <ul v-for=" pic in pics">
                                <li class="current"><img :src="pic.spic" alt=""/></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="yd_1200">
                <div class="ticket">
                    <ul>
                        <li class="ticket_on"><a href="#ticket_tab">门票</a></li>
                    </ul>
                </div>
                <div class="ticket_tab" id="ticket_tab">
                    <table width="1200" border="0" cellspacing="0" cellpadding="0" class="t_tab" id="tbColor">
                        <tr>
                            <td width="600" bgcolor="#F6F6F6"><strong>门票类型</strong></td>
                            <td width="150" align="center" bgcolor="#F6F6F6"><strong>门市价</strong></td>
                            <td width="150" align="center" bgcolor="#F6F6F6"><strong>乐乐价</strong></td>
                            <td width="150" align="center" bgcolor="#F6F6F6"><strong>付款方式</strong></td>
                            <td width="150" align="center" bgcolor="#F6F6F6">&nbsp;</td>
                        </tr>
                        <tr>
                            <td align="center" colspan="5" style=" border:none">
                                <div class="show" id="show" style="display: none;">
                                    <dl class="ticket_pro_list">
                                        <dt>费用包含</dt>
                                        <dd>郑州海洋馆学生票（大中专生、本科生、研究生），仅限大中专在校学生、本科生、研究生持学生证购学生票。</dd>
                                    </dl>
                                    <dl class="ticket_pro_list">
                                        <dt>兑换方式</dt>
                                        <dd>凭携程确认短信至指定地点付款取票；或供应商短信中的入园码或二维码到指定地点付款取票。</dd>
                                    </dl>
                                    <dl class="ticket_pro_list">
                                        <dt>重要条款</dt>
                                        <dd>1、退改规则：支持“随时退”。如需修改或取消您的订单，请登录“我的携程”订单管理界面进行相关操作，或致电携程：10106666*0。</dd>
                                        <dd>2、仅限于大中专在校学生、本科生、研究生持学生证购学生票。</dd>
                                    </dl>
                                    <i></i>
                                    <div class="pack_up"><a class="packup_btn" href="javascript:void(0)"
                                                            onclick="document.getElementById('show').style.display=='none'?(document.getElementById('show').style.display='block'):(document.getElementById('show').style.display='none')	">收起</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr v-for="(item,index) in getTickets">
                            <td align="left"><a href="javascript:void(0)">{{item.name}}</a>
                            </td>
                            <td align="center" class="linethrow">￥{{item.oprice}}</td>
                            <td align="center" class="yellow">￥{{item.dprice}}</td>
                            <td align="center">网上支付</td>
                            <td align="center">
                                <button @click="setOrder(item.id)">门票预订</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="yd_1200">
                <div class="yd_right">
                    <iframe scrolling="no" width="260" height="1120" frameborder="0"
                            src="zhoubiantuijian/zhoubian.html"></iframe>
                </div>
                <div class="tickettab">
                    <ul>
                        <li class="tickettab_on"><a href="#xuzhi">预订须知</a></li>
                        <li><a href="#jianjie">景区简介</a></li>
                        <li><a href="#jianjie">景区导游</a></li>
                        <li><a href="#zhinan">交通指南</a></li>
                    </ul>
                </div>
                <div class="w_tip" id="xuzhi">
                    <h3>预订须知</h3>
                    <ul>
                        <li>● 预约时需提供团购券券号及密码；预约成功后，如您未在预约时间入住，则团购券视为已使用；预约是否成功以商家的最终确认为准；由于商家单日接待能力有限，建议您尽可能更早提前预约。</li>
                        <li>●
                            成功购买团购券后，请按照指定期限预约指定房型，不设找赎，不可兑换现金，不可顺延；如未成团，则艺龙会将款项退还至您支付时使用的信用卡账户中，由于各信用卡开户行不同退款时间大约需要2-15个工作日。
                        </li>
                        <li>● 团购券购买数量不设限(酒店声明的特殊情况除外)。除非特别说明，可以在一家酒店连续使用多张团购券。请注意在预约时向酒店说明。</li>
                        <li>● 此价格不可与其他折扣或促销项目同时享用。</li>
                        <li>● 通常酒店的入住时间为14：00之后，离店时间为正午12：00之前。如提前入住或推迟离店，建议您直接与酒店联系确认入离时间，是否加收费用等。</li>
                        <li>● 每位入住酒店的宾客需携带有效身份证件方可办理入住登记。</li>
                        <li>● 团购券未包含的其他项目，如酒店餐饮、娱乐、酒水、加床、通讯及政府税金等其他费用需由入住人另行支付。</li>
                        <li>● 团购券号和密码如果忘记，可登录elong.com"我的账户"中"我的团购券"进行查询获取。</li>
                        <li>● 在法律允许的范围内，根据活动的进展情况艺龙旅行网可能对活动的规则/条款作出适当修改/调整。</li>
                        <li>● 本团购产品所示之销售数量为艺龙旅行网及其合作伙伴之销量总和。</li>
                    </ul>
                </div>
                <div class="w_tip" id="jianjie">
                    <h3>景区介绍</h3>
                    <p>{{scenics[0].summary}}</p>
                </div>
                <div class="w_tip" id="zhinan">
                    <h3>交通指南</h3>
                    <p><img src="images/bigmap.jpg"/></p>
                </div>
            </div>
            <div class="footer">
                <iframe scrolling="no" src="../footer/foot.html" frameborder="0" width="1200" height="120"
                        _height="120"></iframe>
            </div>
        </div>
    </div>
</div>
<script>

    let scid = location.href.split('=')[1];

    let vue = new Vue({
        el: "#app",
        data() {
            return {
                scenics: [],
                tickets: [],
                pics: [],
                getTickets: [],//门票集合
            };
        },
        created: function () {//页面初始化时，需要执行的业务可以放入该方法
            //调用加载数据方法
            // alert(scid);
            this.select(scid);
            this.getTicketsList(scid)
        },
        methods: {
            select(id) {
                var _this = this;
                axios.get('/scenic/queryById/' + id
                )//请求参数
                    .then(function (response) {//回调函数
                        if (response.data.code == 200) {
                            //这里面直接写this相当于axios对象 不是vue
                            // this.tableData = response.data.data.list; //错误的
                            _this.scenics = response.data.data;
                            console.log(_this.scenics);
                            _this.pics = _this.scenics[0].picList;
                            console.log(_this.tickets);
                            console.log(_this.pics);
                        }
                    })
                    .catch(function (error) {//异常处理
                        console.log(error);
                    });
            },
            //获取门票信息
            getTicketsList(id) {
                let _this = this
                axios.get('/tst/' + id)
                    .then(function (response) {
                        console.log("门票" + response.data)
                        if (response.data.code == 200) {
                            _this.getTickets = response.data.data
                            console.log("门票" + response.data)
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            //跳转订单
            setOrder(orderId) {
                // localStorage.setItem("Scenic",JSON.stringify(Scenic));
                // let id = localStorage.getItem("id");
                top.location.href = "dingdan.html?orderId=" + orderId
                // localStorage.setItem("orderId",orderId);
                // let id = localStorage.getItem("id");
            },
            //判断用户
            getUser() {
                let _this = this
                axios.get('/tuser/tick')
                    .then(function (response) {
                        if (response.data.code == 200) {
                            //获取二维码
                            _this.order();
                        } else {
                            alert("请先登录，再进行收藏操作")
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            //加入收藏
            order(){
                let _this=this
                this.collect = {
                    "objcode":this.scenics[0].name,//景区名称
                    "objid":this.scenics[0].id,//景区id
                    "objname":this.scenics[0].saddress,
                    "description":this.scenics[0].summary,
                }
                this.$confirm('确定将此景区加入收藏吗', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("/favorite/add",_this.collect)
                    this.$message({
                        type: 'success',
                        message: '收藏成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消加入'
                    });
                });
                //使用axios向后台发请求
            },
        }
    });


</script>
</body>
</html>
